<script setup lang="ts">
import { MoreFilled } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import { getCode, login, giteeUrl, register } from "../../services/login";
import { useRouter } from "vue-router";
import { elNotificationStore } from "../../store/LoginSuccessStore";
import { isLoginStore } from "../../store/IsLoginStore";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
const isLogin = isLoginStore();
const elNotStore = elNotificationStore();
let { isLoginFlag, isLoginBox } = storeToRefs(isLogin);
let { isShow } = storeToRefs(elNotStore);
defineProps<{}>();
interface captchaInterface {
  uuid: string;
  img: string;
}
const router = useRouter();
const option = reactive({
  submitBtn: false,
  emptyBtn: false,
  column: [
    {
      row: true,
      maxlength: 32,
      showWordLimit: true,
      span: 20,
      prop: "userName",
      label: "用户名",
      rules: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    },
    {
      span: 20,
      prop: "password",
      label: "密码",
      type: "password",
      showPassword: true,
      rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
    },
    {
      span: 14,
      prop: "code",
      label: "验证码",
      autocomplete: "off",
      rules: [{ required: true, message: "请输入验证码", trigger: "blur" }],
    },
    {
      span: 6,
      labelWidth: 0,
      prop: "img",
    },
  ],
});
const captcha = ref<captchaInterface>({
  uuid: "",
  img: "",
});

const obj = ref<any>({});
//gitee url
const giteeLoginUrl = ref("");

//登录url
const getGiteeLoginUrl = function () {
  giteeUrl("user")
    .then((res) => {
      giteeLoginUrl.value = res.data;
    })
    .catch((error) => {});
};
//验证码
const codeInfo = function () {
  getCode()
    .then((res) => {
      captcha.value = res.data;
      obj.value.codeKey = captcha.value.uuid;
    })
    .catch((error) => {});
};
// 提交
const submit = function (form, done) {
  obj.value.type = 1;
  login(obj.value)
    .then((res) => {
      let userData = {
        username: res.data.username, //账号
        fullName: res.data.fullName, // 姓名
        headPic: res.data.headPic, // 头像
        endTime: res.data.endTime, //最新登录时间
        roleName: res.data.roleName, //角色
        id: res.data.id,
      };

      localStorage.setItem("userData", JSON.stringify(userData));
      isShow.value = 1;
      isLoginFlag.value = true;
      isLoginBox.value = false;
      router.go(0);
    })
    .catch((error) => {
      codeInfo();
      done(form);
    });
};

//登录校验
const form = ref(null);
const checkSubmit = function () {
  const formValue = form.value as { submit: () => void } | null;
  if (formValue) {
    formValue.submit();
  }
};
//关闭
const handleClose = function () {
  isLoginBox.value = false;
};

//标签
const tabsName = ref("login");

//注册内容
const optionRegister = reactive({
  width: 400,
  time: 60,
  submitBtn: false,
  emptyBtn: false,
  menuPosition: "100px",
  column: [
    {
      row: true,
      maxlength: 32,
      showWordLimit: true,
      span: 20,
      prop: "username",
      label: "用户名",
      autocomplete: "off",
      rules: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    },
    {
      row: true,
      span: 20,
      prop: "password",
      label: "密码",
      type: "password",
      showPassword: true,
      autocomplete: "off",
      rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
    },
    {
      span: 20,
      prop: "verifyPassword",
      label: "确认密码",
      type: "password",
      showPassword: true,
      autocomplete: "off",
      rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
    },
  ],
});

const objRegister = ref<any>({});

const userRegister = function (form, done) {
  register(objRegister.value)
    .then((res) => {
      ElMessage.success("注册成功！");
      tabsName.value = "login";
      done(form);
    })
    .catch((error) => {
      done(form);
    });
};
const registerFrom = ref(null);
const checkRegisterSubmit = function () {
  const formValue = registerFrom.value as { submit: () => void } | null;
  if (formValue) {
    formValue.submit();
  }
};
onMounted(() => {
  codeInfo();
  getGiteeLoginUrl();
});
</script>
<template>
  <el-dialog
    :before-close="handleClose"
    v-model="isLoginBox"
    title=""
    width="45%"
  >
    <el-tabs v-model="tabsName" type="border-card" class="demo-tabs">
      <el-tab-pane label="登录" name="login">
        <div class="login">
          <avue-form
            class="login_from"
            ref="form"
            :option="option"
            v-model="obj"
            @submit="submit"
          >
            <template v-slot:img>
              <div class="code">
                <img :src="captcha.img" alt="验证码" @click="codeInfo" />
              </div>
            </template>
          </avue-form>
          <el-button type="primary" size="default" plain @click="checkSubmit"
            >登录</el-button
          >
          <span class="otherLogin">
            <el-popover
              placement="top-start"
              title=""
              width="200"
              trigger="hover"
            >
              <el-tooltip
                class="item"
                effect="dark"
                content="gitee登录"
                placement="top-start"
              >
                <a :href="giteeLoginUrl">
                  <el-avatar :size="30">
                    <img src="../../assets/images/giteelog.png" />
                  </el-avatar>
                </a>
              </el-tooltip>
              <template #reference>
                <el-button circle :icon="MoreFilled" type="primary"></el-button>
              </template>
            </el-popover>
          </span>
        </div>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register">
        <div class="register">
          <avue-form
            class="register_from"
            ref="registerFrom"
            :option="optionRegister"
            v-model="objRegister"
            @submit="userRegister"
          >
          </avue-form>
          <!-- 自定义按钮 -->
          <el-button
            type="primary"
            size="default"
            plain
            @click="checkRegisterSubmit"
            >注册</el-button
          >
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<style lang="less" scoped>
.login {
  margin-top: 20px;
  margin-left: 3%;
  justify-content: center;
  align-items: center;
  overflow: visible;
  text-align: center;
}

.register {
  margin-top: 20px;
  margin-left: 3%;
  justify-content: center;
  align-items: center;
  overflow: visible;
  text-align: center;
}
.record {
  text-align: right;
  margin-bottom: 1%;
  margin-right: 1%;
  a {
    text-decoration: none;
  }
}
.otherLogin {
  margin-left: 3%;
  text-align: center;
  font-size: 12px;
}
.otherLogin:hover {
  cursor: pointer;
}
.login_avatar:hover {
  cursor: pointer;
}
</style>
